<template>
    <div class="app-container">
        <!-- <el-input v-model="currentModel"></el-input> -->
      <label>当前的模型</label>  <el-select v-model="currentModel" >
      <el-option
      v-for="item in modelsList"
      :key="item.title"
      :label="item.title"
       :value="item.title">
     </el-option>
  </el-select>
      <el-table :data="modelsList" style="width: 100%;margin-top:30px;" border>
        <el-table-column align="center" label="模型的title" width="220">
          <template slot-scope="scope">
            {{ scope.row.title }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="模型的名称" width="220">
          <template slot-scope="scope">
            {{ scope.row.model_name }}
          </template>
        </el-table-column>
        <el-table-column align="header-center" label="模型的位置">
          <template slot-scope="scope">
            {{ scope.row.filename }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="模型样图" width="220">
            <template slot-scope="scope">
            <el-image
             style="width: 100px; height: 100px"
            :src="scope.row.filename"
            :fit="fit"></el-image>
        </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="handleEdit(scope)">切换该模型</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </template>
  
  <script>
  import {changeModel,getModels,getcurrentModel } from '@/api/aipating/aihuihua'
  
  const defaultRole = {
    id: '',
    roleName: '',
    desc: '',
    routes: []
  }
  
  export default {
    data() {
      return {
        modelsList: [],
        currentModel:""
      }
    },
    computed: {
      routesData() {
        return this.modelsList
      }
    },
    created() {
      // Mock: get all routes and roles list from server
      this.getModel()
      this.getcurrentModel()
    },
    methods: {
      async getModel() {
        const res = await  getModels()
        this.modelsList = res.data
      },
      async getcurrentModel(){
        const res = await  getcurrentModel()
        console.info(res)
        // this.serviceRoutes = res.data
        this.currentModel = res.data
      },
      async handleEdit(scope) {
        this.currentModel=scope.row.title
         changeModel(scope.row.title)
        this.$notify({
          title: 'Success',
          dangerouslyUseHTMLString: true,
          message: `
              <div>Role Key: ${id}</div>
              <div>Role Name: ${roleName}</div>
              <div>Description: ${desc}</div>
            `,
          type: 'success'
        })
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .app-container {
    .roles-table {
      margin-top: 30px;
    }
    .permission-tree {
      margin-bottom: 30px;
    }
  }
  </style>
  